<template>
    <div class="Header">
      <div class="header_bgc">
        <!-- 导航栏 -->
        <div class="Header_bottom_bar">
          <div class="Header_bottom_container">
            <div class="Header_bottom_nav">
              <div class="Header_bottom_collapse">
                <div class="icon_img">
                  <img src="/logo.png" alt="" />
                  <span class="header_text">综合素养挑战赛</span>
                </div>
                <ul>
                  <li
                    v-for="item in headeer_bar"
                    :key="item.id"
                    @click="handleActive(item.id)"
                    :class="{ active: active === item.id }"
                  >
                    <el-tooltip
                      content="请联系管理员"
                      placement="bottom"
                      effect="light"
                    >
                      <div class="imgOrname">
                        <img :src="item.icon" alt="" />
                        <a href="javascript:;">{{ item.name }}</a>
                      </div>
                    </el-tooltip>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <img
            class="bgc_over"
            src="@/assets/images/Home/home_header.png"
            alt=""
          />
          <div class="container main_content">
            <!-- 左侧登录 -->
            <div class="main_left">
              <span class="main_left_text">AI Will 综合素养挑战赛</span>
              <p>登录后即可报名比赛</p>
              <div class="main_btn">
                <span class="main_left_bt" @click="handleRegister">注册</span>
                <span class="main_left_bt" @click="handleLogin">登录</span>
              </div>
            </div>
            <!-- 右侧图片 -->
            <div class="main_right">
              <img src="@/assets/images/Home/home_header_right.png" alt="" />
            </div>
          </div>
        </div>
        <!-- 比赛项目 -->
        <div class="competition">
          <div class="container competition_content">
            <h3 class="content_h3">比赛项目</h3>
            <div class="content_list">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="list_row">
                      <div class="row_list">
                        <img src="@/assets/images/Home/row1.png" alt="" />
                      </div>
                      <div class="row_bgc">
                        <span>图形化编程</span>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="list_row">
                      <div class="row_list">
                        <img src="@/assets/images/Home/row2.png" alt="" />
                      </div>
                      <div class="row_bgc">
                        <span>Python代码</span>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="list_row">
                      <div class="row_list">
                        <img src="@/assets/images/Home/row3.png" alt="" />
                      </div>
                      <div class="row_bgc">
                        <span>C++代码</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 关于比赛 -->
        <div class="aboutcompetition">
          <div class="container aboutcompetition_content">
            <h3 class="content_h3">关于比赛</h3>
            <div class="textOrimg">
              <div class="content_text">
                <p>
                  AI
                  Will综合素养挑战赛是面向青少年的人工智能教育比赛项目。该项目需要根据自身特点，做出比赛组织、赛程安排、评分方法等方面的相关规定和说明。
                </p>
                <p>
                  为了保证比赛的顺利进行，建立了一套比赛的整体概念准则。这些准则对于理解比赛的根本目的和要求有重要作用。
                </p>
              </div>
  
              <!-- 图片 -->
              <div class="footer_img"></div>
            </div>
          </div>
        </div>
        <!-- 备案号 -->
        <div class="internet_content_provider">
          <div class="container provider_content">
            <p class="provider_text">
              湖南中工教育科技有限公司 地址：湖南省长沙市芙蓉区乔庄巷78号物语南院
              联系电话：132 6936 6852
            </p>
            <p class="provider_text"></p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  
  <script  setup>
  import { onMounted, ref } from "vue";
  import { useRouter } from "vue-router";
  import d1 from "@/assets/images/Home/organ1.png";
  import d2 from "@/assets/images/Home/organ2.png";
  import d3 from "@/assets/images/Home/organ3.png";
  import d4 from "@/assets/images/Home/organ4.png";
  
  const headeer_bar = [
    {
      id: 1,
      name: "首页",
      icon: d1,
    },
    {
      id: 2,
      name: "竞赛流程",
      icon: d2,
    },
    {
      id: 3,
      name: "通知公告",
      icon: d3,
    },
    {
      id: 4,
      name: "赛事帮助",
      icon: d4,
    },
  ];
  const active = ref(1);
  const handleActive = (activeId) => {
    active.value = activeId;
  };
  const router = useRouter();
  const handleRegister = () => {
    router.push("/auth/reg");
  };
  const handleLogin = () => {
    router.push("/auth/login");
  };
  onMounted(() => {
    // Swiper配置
    new Swiper(".swiper-container", {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
    });
  });
  </script>
  
  <style lang="scss" scoped>
  .container {
    max-width: 1170px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  .Header {
    .header_bgc {
      width: 100%;
      height: 801px;
      position: relative;
  
      // 导航栏
      .Header_bottom_bar {
        width: 100%;
        z-index: 99;
        position: absolute;
        top: 0;
        -webkit-transition: all ease 1s;
        transition: all ease 1s;
  
        .Header_bottom_container {
          max-width: 1170px;
          width: 100%;
          padding-right: 15px;
          padding-left: 15px;
          margin-right: auto;
          margin-left: auto;
  
          //   导航栏
          .Header_bottom_nav {
            display: flex;
            align-items: center;
            flex-flow: row;
            justify-content: flex-start;
            // padding: 0 20px !important;
            // background-image: -webkit-linear-gradient(
            //   0deg,
            //   #5d5df9 0,
            //   #312366 100%
            // );
            z-index: 10;
  
            .Header_bottom_collapse {
              width: 100%;
              display: flex !important;
              flex-direction: row;
              flex-basis: auto;
              flex-grow: 1;
              flex: 1;
              align-items: center;
  
              .icon_img {
                display: flex;
                align-items: center;
  
                img {
                  width: 100px;
                }
              }
  
              .header_text {
                font-size: 24px;
                font-weight: 500;
                line-height: 78px;
                margin-left: 15px;
                margin-right: 83px;
                color: #ffffff;
              }
              .imgOrname {
                display: flex;
                align-items: center;
                justify-content: center;
              }
  
              ul {
                display: flex;
  
                li {
                  cursor: pointer;
                  display: flex;
                  margin: 0;
                  color: #fff;
                  line-height: 1.7;
                  font-size: 16px;
                  padding: 25px 18px;
                  transition: all 0.5s;
                  align-items: center;
  
                  img {
                    width: 16px;
                    height: 16px;
                    margin-right: 8px;
                  }
  
                  a {
                    color: #fff;
                    font-weight: 400;
                    align-items: center;
                    font-size: 14px;
                    text-transform: capitalize;
                    border-bottom: 2px solid transparent;
                    font-family: var(--heading-font);
                  }
                }
  
                .active {
                  background: rgba(255, 255, 255, 0.2);
                  border-radius: 0px 0px 12px 12px;
                }
              }
            }
          }
        }
      }
  
      .main {
        width: 100%;
  
        position: relative;
        top: 0;
        .bgc_over {
          width: 100%;
          height: 801px;
          margin-bottom: 68px;
          cursor: pointer;
        }
  
        .main_content {
          display: flex;
        }
  
        .main_left {
          position: absolute;
          top: 28%;
          margin-right: 95px;
  
          .main_left_text {
            font-size: 36px;
            font-weight: normal;
            line-height: 36px;
            letter-spacing: 0px;
            color: #ffffff;
          }
  
          .main_btn {
            display: flex;
  
            .main_left_bt {
              cursor: pointer;
              width: 134px;
              height: 52px;
              border-radius: 8px;
              font-size: 24px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              color: #fff;
              box-sizing: border-box;
              border: 2px solid #ffffff;
  
              &:nth-child(2) {
                margin-left: 53px;
                background-color: #fff;
                color: #1964d6;
              }
            }
          }
  
          p {
            margin: 31px 0 57px 0;
            font-size: 28px;
            font-weight: normal;
            line-height: 36px;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
  
        .main_right {
          position: absolute;
          margin-left: 480px;
          top: 10%;
          width: 789px;
          height: 547px;
  
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
  
      // 比赛项目
      .competition {
        width: 100%;
        margin-bottom: 83px;
  
        .competition_content {
          display: flex;
          flex-direction: column;
  
          .content_h3 {
            text-align: center;
            font-size: 36px;
            font-weight: normal;
            line-height: 36px;
            letter-spacing: 0px;
  
            color: #1964d6;
            margin-bottom: 30px;
          }
  
          .content_list {
            // width: 960px;
            // margin: 0 auto;
            display: flex;
            justify-content: center;
  
            /* 外层容器 */
            .swiper {
              width: 1024px;
              height: 300px;
            }
  
            .swiper-slide {
              text-align: center;
              /* Center slide text vertically */
              display: -webkit-box;
              display: -ms-flexbox;
              display: -webkit-flex;
  
              transition: 300ms;
              transform: scale(0.8);
              z-index: 1;
            }
  
            .swiper-slide-active,
            .swiper-slide-duplicate-active {
              transform: scale(1) translateX(0%);
              z-index: 9;
            }
  
            .swiper-slide-prev {
              transform: translateX(30%) scale(0.8);
            }
  
            .swiper-slide-next {
              transform: translateX(-30%) scale(0.8);
            }
  
            .list_row {
              position: relative;
              width: 100%;
              // width: 100%;
              height: 280px;
              border-radius: 30px;
              padding-top: 8px;
              background: rgba(25, 100, 214, 0.1);
              box-sizing: border-box;
              border-image: linear-gradient(
                  129deg,
                  rgba(255, 255, 255, 0.3) 2%,
                  rgba(0, 0, 0, 0.3) 101%
                )
                1;
  
              backdrop-filter: blur(20px);
  
              .row_list {
                display: flex;
                justify-content: center;
                align-items: center;
              }
  
              .row_bgc {
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
                background: rgba(25, 100, 214, 0.6);
                // width: 380px;
                height: 60px;
                line-height: 60px;
                border-radius: 0px 0px 30px 30px;
                box-sizing: border-box;
                z-index: 2;
                border-image: linear-gradient(
                    105deg,
                    rgba(255, 255, 255, 0.3) 6%,
                    rgba(0, 0, 0, 0.3) 97%
                  )
                  1;
  
                span {
                  font-size: 24px;
                  font-weight: normal;
                  line-height: 31.2px;
                  letter-spacing: 0px;
  
                  color: #ffffff;
                }
              }
            }
  
            .carousel_list {
              // display: flex;
              // justify-content: center;
              width: 100%;
  
              .carousel_item_list {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
  
        .el-carousel__item--card {
          width: auto;
        }
      }
  
      // 关于比赛
      .aboutcompetition {
        width: 100%;
        height: 554px;
        opacity: 1;
        margin-bottom: 20px;
        background: rgba(25, 100, 214, 0.1);
  
        .aboutcompetition_content {
          width: 100%;
          height: 100%;
  
          .content_h3 {
            padding-top: 83px;
            font-size: 36px;
            font-weight: normal;
            line-height: 36px;
            letter-spacing: 0px;
  
            color: #1964d6;
          }
  
          .textOrimg {
            display: flex;
  
            .content_text {
              width: 601px;
              height: 294px;
              margin-top: 58px;
              margin-right: 101px;
  
              p {
                font-size: 24px;
                font-weight: normal;
                line-height: 36px;
                text-indent: 2em;
                letter-spacing: 0px;
                color: #333333;
  
                &:nth-child(1) {
                  margin-bottom: 20px;
                }
              }
            }
  
            .footer_img {
              position: relative;
              width: 460px;
              height: 311px;
              border-radius: 8px;
              background: #1964d6;
              backdrop-filter: blur(10px);
  
              border-radius: 8px;
  
              &::before {
                content: "";
                position: absolute;
                top: 20px;
                right: 20px;
                width: 460px;
                height: 311px;
                background: url("@/assets/images/Home/footer_school.png");
              }
            }
          }
        }
      }
  
      // 备案号
      .internet_content_provider {
        width: 100%;
  
        .provider_content {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: 10px;
  
          .provider_text {
            font-size: 12px;
            font-weight: normal;
            line-height: 20px;
            text-align: center;
            letter-spacing: 0px;
            color: #cccccc;
          }
        }
      }
    }
  }
  </style>